<template>
  <div class="big-box">
    <div class="top-box">
        <div class="top">
            <div>
                <span @click="back()"><img src="/image/Mine/zjt.png" alt=""></span>
                <p class="p1">新增收货地址</p>
            </div>
        </div>  
    </div>
    <div class="main">
        <van-address-edit
        :area-list="areaList"
        show-postal
        show-delete
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @change-detail="onChangeDetail" />
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
import { Toast } from 'vant';
import province_list from '@/assets/area.js'


export default {
    data() {
        return {
            areaList:province_list,
            searchResult: [],
            name: "",
            phone: "",
            address: "",
            door: "",
            tag: "",
        };
    },
    methods:{
        back(){
            Dialog.confirm({
                title: '放弃编辑',
                message: '地址信息未保存，确定现在离开吗',
            }).then(() => {
                this.$router.push("/site")
            }).catch(() => {

            });
        },
        onSave() {
            let usp=new URLSearchParams()
            usp.append("name",this.name)
            usp.append("phone",this.phone)
            usp.append("address",this.address)
            usp.append("door",this.door)
            usp.append("tag",this.tag)
            this.$store.dispatch("axiossite",{url:"http://1.116.51.111:8000/order/address/",usp})
            Toast('添加成功');
            console.log("hahha")
            this.$router.push("/site")
        },
        onChangeDetail(val) {
            if (val) {
                this.searchResult = [
                    {name: '西安市',address: '雁塔区',},
                ];
            } else {
                this.searchResult = [];
            }
        },
    }
}
</script>

<style scoped>

.top-box{
    width: 100%;
    height: 0.38rem;
    display: flex;
    justify-content: center;
    border-bottom: 0.01rem solid #f2f2f2;
}
.top{
    width: 93%;
    height: 0.38rem;
}
.top div{
    width: 100%;
    height: 0.38rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.top div span,.top div span img{
    position: absolute;
    left: 2%;
    width: 0.2rem;
    height: 0.2rem;
}
.top div .p1{
    font-size: 0.16rem;
}
</style>